<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>水平居中布局实现方式3:absolute + transform</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0; 
			}
			#parent{
				width: 100vw;
				height: 200px;
				background-color: aqua;
				/* 
					4. 父级开启定位，relative、absolute，fixed都是可以的。
				 */
				position: relative;
			}
			#child{
				width: 20vw;
				height: 200px;
				background-color: bisque;
				/* 
					3. 我们把当前子元素设置为决对定位后：
						如果父级元素没有开启定位的话，那么当前元素就相对于页面定位的。
						如果父级元素开启了定位的话，那么当前元素就相对于父元素定位的。
				*/ 
				position: absolute;
				left: 50%;
				/* 向左偏移子元素宽度的一半 */
				transform: translateX(-50%);
			}
			
			/* 
				5. absolute + transform 方案的优缺点：
				   优点：不论父级元素是否脱离文档流，都不会影响子级元素的的水平居中效果。
				   缺点：transform属性时CSS3新增的属性，老版本浏览器兼容情况不太好。 
			*/
		</style>
	</head>
	<body>
		<!-- 1. 定义父级元素 -->
		<div id="parent">
			<!-- 2. 定义子级元素 -->
			<div id="child">
				3:absolute + transform
			</div>
		</div>
	</body>
</html>
